
<style lang="scss" scoped>
    .input{width: 260px;}
    .sinput{width: 150px;}
    /*.active{background: #5979f8;color:#fff;}*/
    .button{margin-left: 20px;background: #5979f8;color:#fff;}
    .out{background: #f7f8fa;padding-bottom:90px;}

    .header{height: 80px;background: #fff;}
    .hs-logo{background: #3f66f6; height: 80px; color: #fff;text-align: center;line-height: 70px; width: 200px;display: flex; justify-content: center;}
    .hs-logo a{
        font-size:0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hs-logo a i.iconfont{
        color:#fff;
        font-size:40px;
        line-height:1;
    }

    .add-box{width: 1200px;height:700px;margin: 0 auto;margin-top: 60px;background: #fff;}
    .nav{background: #fff;}
    .add-content{padding: 30px;}
    .btn-active{background: #3f66f6;color:#fff;}
    .btn-or{width: 140px;}

    .qr-box{width: 100%;height:100%;position: absolute;top: 0;left: 0;background: black;opacity: 0.5;}
    .qr-content{width: 380px;height: 540px;background: blue;margin: 0 auto;}
    .qr-register{margin: 88px 44px 0px 44px;}  /*width: 288px;height:288px;background: pink;*/
    .ad-phone{left: 0;top: 0;z-index: 1;}

    .popup{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .popCon{
        width: 380px;
        height: 540px;
        background: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -190px;
        margin-top: -270px;
    }
    .qr-txt1{color:#666a80;}
    .qr-txt2{ color:#c2c5d5;}

    .step-head{padding: 24px 20px 0 20px;background: #fff;position: relative;font-size: 18px;font-weight: bold;margin-left: -20px;}
    .step-one{float: left;background: #f7f8fa;width:150px;height: 40px;line-height: 40px;text-align: center;margin-right: 58px;}
    .triangel-left{display: inline-block;width: 0;height: 0;border:20px solid rgba(1,1,1,0);border-left: 20px solid #f7f8fa;position: absolute;top:24px;left: 168px;}
    .triangel-right{display: inline-block;width: 0;height: 0;border:20px solid #f7f8fa;border-left: 20px solid rgba(1,1,1,0);position: absolute;top:24px;left: 180px;}
    .step-two{float: left;width:150px;background: #f7f8fa;height: 40px;line-height: 40px;margin-right: 58px;padding-left: 5px;margin-left: -8px;color: #ccc;}
    .step-three{margin-left: 407px;background: #f7f8fa;height: 40px;line-height: 40px;color: #ccc;}
    .triangel-left2{display: inline-block;width: 0;height: 0;border:20px solid rgba(1,1,1,0);border-left: 20px solid #f7f8fa;position: absolute;top:24px;left: 375px;}
    .triangel-r{display: inline-block;width: 0;height: 0;border:20px solid #f7f8fa;border-left: 20px solid rgba(1,1,1,0);position: absolute;top:24px;left: 387px;}
</style>


<template>
    <section class="out p-relative">

        <div class="">
            <section class="header">
                <section class="hs-logo">
                    <a href="">
                        <i class="icon iconfont"></i>
                        <!-- <img src="http://jhsy-img.caizhu.com/sass/images/ic-logo-2.png" alt="logo"> -->
                    </a>
                </section>
            </section>
            <section class="add-box">

                <section class="add-content">
                    <div class="step-head">
                        <span class="step-one">添加手机号码</span>
                        <span class="triangel-left"></span>
                        <span class="triangel-right"></span>
                        <div class="step-two">完善信息</div>
                        <span class="triangel-left2"></span>
                        <span class="triangel-r"></span>
                        <div class="step-three">注册成功</div>
                    </div>
                    <div class="mt20">
                        <el-input
                                type="text"
                                class="input"
                                id="phone"
                                auto-complete="off"
                                v-model="phoneNumber"
                                placeholder="请输入手机号">
                            2222
                        </el-input>
                        <el-button
                                class="button"
                                id="button"
                                @click="togetCode">
                            获取验证码
                        </el-button>
                        <div class="mt20">
                            <el-input
                                    type="text"
                                    class="sinput"
                                    v-model="verifyCode"
                                    v-focus="focusStatus"
                                    placeholder="请输入验证码">
                            </el-input>
                        </div>
                        <section class="mt20">
                            <el-button class="ml20 btn-active btn-or" @click="next"><span>下一步</span></el-button>
                        </section>
                    </div>
                </section>

            </section>
        </div>
        <div class="popup" v-show="!popupShow">
            <div class="popCon">
                <section id="qr-register" class="qr-register"></section>
                <p class="fs-18 qr-txt mt40" style="text-align: center;">请用微信扫描二维码后开始注册</p>
                <p class="fs-12 qr-txt mt20"  style="text-align: center;">便于注册后使用微信扫码快捷登录</p>
            </div>
        </div>

    </section>

</template>

<script>

	import qs from 'qs'
	import com from 'js/common'

	var wxLoginJs = location.protocol +'//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
		authInfo = {};
	function wxLoginJsFn(){
		var obj = new WxLogin({
			id:"qr-register",
			appid: authInfo.AppID,
			scope: "snsapi_login",
			redirect_uri:  encodeURIComponent(location.protocol+'//'+location.host+location.pathname),
			state: authInfo.State,
			style: "black",
			href: ""
		});
	}

		function wxLogin(opts){
			com.createJs(wxLoginJs, wxLoginJsFn);
		}


	export default{
		data: function(){
			return {
				active: 1,
				phoneNumber: '',
				verifyCode: '',
				activeNote: state => state.activeNote,
				qrCodeSuccess: false,
				popupShow: false,
            }
		},
		mixins: [mixinMethods],
		methods: {
			togetCode:function(){
				let self = this;
				let phone = self.phoneNumber;
				if(!phone){
					this.$message.error("请输入手机号");
                }else{
					if(!(/^1[34578]\d{9}$/.test(phone))){
						this.$message.error("手机号码有误，请重填");
						self.phoneNumber = '';
						return false;
					}else{
						let button = document.getElementById('button');

						timeGo(button);
						axios.post('/api/system/sendMobileCode', qs.stringify({
							mobile: self.phoneNumber,
							type: 2,
						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){
								console.log(d);
							}else {
								this.$message.error(d.msg);
                            }
						} );
                    }
                }
            },
			next:function(cbCode){
				let self = this;
				let phone = self.phoneNumber;
				let verifyCode = self.verifyCode;
                if(!phone){
					this.$message.error("请输入手机号");
                	return false;
                }
                if(!verifyCode){
					this.$message.error("请输入验证码");
                }else{
					axios.post('/com/member/bindMobile', qs.stringify({
						mobile: phone,
						code: verifyCode,
                        type:2
					})).then( r=>{
						var d = r.data;
						if(d.flag == 1){
							location.assign('/register/complete-info' + '?inviteCode='+ verifyCode + '&ContactPhone='+ this.phoneNumber);
						}else{
							this.$message.error(d.msg);
						}

					});

                }
            },


			getAuthInfo: function(cbCode){   // 微信登录获取信息
				axios.post('/com/member/getLoginConfig').then( (res)=>{
					var d = res.data;
					if(d.flag == 1){
						authInfo = d.data;
						if(cbCode){
							this.codeFN(cbCode);
						}else{
							wxLogin();
						}
					}
				} );
			},
			codeFN(cbCode){
				if(cbCode){

					axios.post('com/member/wxLoginCall', qs.stringify({
						code: cbCode,
						state: authInfo.State
					})).then( r=>{
						var d = r.data;
						if(d.flag == 1){
							if(d.data.StepSign == "fillPhone"){
								this.popupShow = true;
							}else if(d.data.StepSign == "loginSuccess"){
								this.getMembersInfo();
							}
						}else{
							this.$message.error(d.msg);
						}

					})
				}
			},
            getMembersInfo(){
				axios.post('/com/member/getLoginInfo', qs.stringify({

                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                    	if(d.data.CompanyID == 0){
							let code = this.$route.query.code;
							if(code){
								this.popupShow = true;
							}
							// location.assign('/register/complete-info');

                        }else if(d.data.CompanyID == ""){
							let code = this.$route.query.code;
							if(code){
								this.popupShow = true;
							}
							location.assign('/register/complete-info');
                        }else if(d.data.CompanyID >0){
                        	this.$message.success('您已注册过信息，无需再次注册信息！');
                        	setTimeout(function () {
								location.assign('/');
							},2000);
                        }
                    }else{
                    	this.$message.error(d.msg);
                    }
                } );
            },

            getInfo(){
                let Show = this.$route.query.show;
                this.popupShow = false;
     //            if(Show){
     //                if(Show == "1"){
     //                    this.popupShow = false;
     //                }
     //            }else{
					// this.popupShow = true;
     //            }
			}

		},
		mounted: function(){
			var urlParams = this.$route.query,
				cbCode = urlParams.code,
				cbState = urlParams.state;

			this.getAuthInfo(cbCode);

            this.getInfo()
			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                }
            } )*/
		},

	}

	function timeGo(element){
		var num = 60
		var timer = setInterval(function () {
			num--
			element.innerHTML = num + '秒后重新获取'
			element.style.color = ' #ccc'
			element.disabled = ' disabled'
			if (num === 0) {
				element.disabled = ''
				element.style.color = ' #fff'
				element.innerHTML = '获取验证码'
				clearInterval(timer)
			}
		}, 1000)
    }

</script>
